<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>修改登录密码</title>
<c:import url="/ctrl/header"></c:import>
<script>
        function submitCheck() {
            var pwd = /^[A-Za-z0-9_-]+$/;
            var before = $("#beforePwd").val();
            var newPwd = $("#newPwd").val();
            var newPwdAgain = $("#newPwdAgain").val();
            if ($.trim(before) == "") {
                $("#p_error").css("color", "red");
                $("#p_error").text("请输入当前登录密码");
                return false;
            }
            else {
                if (checkPwd() == true && checkPwdOK() == true) {
                	$.ajax({
                		type : 'POST',
                		url : "/changepwd.json",
                		data : {
                			oldPwd : before,
                			pwd : newPwd
                		},
                		success : function(data) {
                			if (data && data.ok) {
                				alert('密码修改成功！');
                			} else {
                				alert(data.msg);
                			}
                		}
                	});
                }
            }
        }
        function checkPwd() {
            var pwd = /^[A-Za-z0-9_-]+$/;
            var newPwd = $("#newPwd").val();

            if ($.trim(newPwd) == "") {
                $("#pwd_error").css("color", "red");
                $("#pwd_error").text("请输入密码");
                return false;
            }
            else if (!RegExp(pwd).test(newPwd)) {
                $("#pwd_error").css("color", "red");
                $("#pwd_error").text("密码由英文、数字及“_”、“-”组成");
                return false;
            }
            else if (newPwd.length < 6 || newPwd.length > 20) {
                $("#pwd_error").css("color", "red");
                $("#pwd_error").text("密码长度只能在6-20位字符之间");
                return false;
            }
            else {
                return true;
            }
        }
        function checkPwdOK() {
            var newPwd = $("#newPwd").val();
            var newPwdAgain = $("#newPwdAgain").val();
            if ($.trim(newPwdAgain) == "") {
                $("#pwd2_error").css("color", "red");
                $("#pwd2_error").text("请输入密码");
                return false;
            }
            else if ($.trim(newPwd) != $.trim(newPwdAgain)) {
                $("#pwd2_error").css("color", "red");
                $("#pwd2_error").text("两次输入的密码不一致");
                return false;
            }
            else {
                return true;
            }
        }
        function err1() {
            $("#pwd_error").text("");
        };
        function err2() {
            $("#pwd2_error").text("");
        }
    </script>
</head>
<body>
  <c:import url="/ctrl/top"></c:import>
  <div class="container">
    <div class="row-fluid">
      <c:import url="/ctrl/menu">
        <c:param name="pageId">
          <c:out value="${pageId}" />
        </c:param>
      </c:import>
      <!--/span-->
      <div class="span10">
        <h3 class="greybg">修改登录密码</h3>
        <table class="table table-striped responsive-utilities"
          style="min-width: 300px; width: 50%">
          <tr>
            <td style="width: 20%">当前登录密码</td>
            <td><input type="password" id="beforePwd"
              name="beforePwd" />&nbsp;&nbsp;<span id="p_error"></span></td>
          </tr>
          <tr>
            <td>请输入新密码</td>
            <td><input type="password" id="newPwd" name="newPwd"
              onblur="checkPwd();" onfocus="err1();" />&nbsp;&nbsp;<span
              id="pwd_error"></span></td>
          </tr>
          <tr>
            <td>请再输入一次</td>
            <td><input type="password" id="newPwdAgain"
              name="newPwdAgain" onblur="checkPwdOK();"
              onfocus="err2();" />&nbsp;&nbsp;<span id="pwd2_error"></span>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align: center;"><input
              type="button" value="修改" id="btnSubmit"
              onclick="submitCheck();" class="button btn-big btn-orange" /></td>
          </tr>
        </table>
      </div>
    </div>
    <hr />
    <c:import url="/ctrl/bottom"></c:import>
  </div>

  <c:import url="/ctrl/footer"></c:import> 
</body>
</html>